<template>
	<view>
		<view class="header" v-if="share_setting.level > 1">
			<view class="grid text-center">
				<view class="padding text-df" :class="[status==1 ? 'text-red' : '']" data-id="1" @click="changstatus">{{share_setting.first_name||'一级'}}({{first_count}})</view>
				<view class="padding text-df" :class="[status==2 ? 'text-red' : '']" data-id="2" @click="changstatus">{{share_setting.second_name||'二级'}}({{second_count}})</view>
				<view v-if="share_setting.level == 3" class="padding text-df" :class="[status==3 ? 'text-red' : '']" data-id="3" @click="changstatus">{{share_setting.third_name||'三级'}}({{third_count}})</view>
			</view>
		</view>
		<mescroll-body ref="mescrollRef" :top="share_setting.level > 1 ? 100 : 10" @init="mescrollInit" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback"
		 @emptyclick="downCallback">
			<view class="np-team" v-for="(item,index) in list" :key="index">
				<view class="np-box text-sm">
					<view class="np-user">
						<image class="np-avatar" :src="item.avatar_url || '/static/images/missing-face.png'"></image>
						<view class="np-item">
							<text class="np-name">{{item.nickname}}</text>
							<text class="np-time">注册时间：{{item.time}}</text>
						</view>
					</view>
					<text>团队{{item.child_count}}人</text>
				</view>
				<view class="np-box">
					<text class="np-price">团队成交{{item.price}}元</text>
					<text class="np-order">{{item.count}}个团队订单</text>
				</view>
			</view>
		</mescroll-body>
	</view>

</template>

<script>
	import base from '@/common/base.js';
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	let loading = false;
	export default {
		mixins: [base, MescrollMixin],
		data() {
			return {
				status: 1,
				first_count: 0,
				second_count: 0,
				third_count: 0,
				list: [],
				share_setting: {
					level: 0
				},
				downOption: {
					native: true // 必须配置此项，且需在pages.json配置"enablePullDownRefresh" : true
				},
				upOption: {
					noMoreSize: 4,
					empty: {
						tip: '~ 您还没有团队成员 ~'
					}
				},
			}
		},
		onLoad(t) {
			this.status = t.status || 1;
			if (this.globalConfig.setting && this.globalConfig.setting.level) {
				this.share_setting = this.globalConfig.setting;
			}
		},
		methods: {
			downCallback() {
				this.list = [];
				this.mescroll.resetUpScroll();
			},
			upCallback(page) {
				if (loading) {
					this.mescroll.setPageNum(page.num);
					return;
				}
				loading = true;
				this.$http.get('api/user/team', {
					params: {
						status: this.status,
						page: page.num
					}
				}).then((res) => {
					loading = false;
					this.first_count = res.first;
					this.second_count = res.second;
					this.third_count = res.third;
					let hasMore = res.list.length < 10 ? false : true;
					this.list = this.list.concat(res.list);
					setTimeout(() => {
						this.mescroll.endSuccess(res.list.length, hasMore);
					}, 1000);
				}).catch((error) => {
					loading = false;
					this.mescroll.endErr();
				});
			},
			changstatus(t) {
				this.status = t.currentTarget.dataset.id;
				this.downCallback();
			}
		},
	}
</script>

<style lang='scss'>
	.header {
		position: fixed;
		/* #ifdef H5 */
		top: 88rpx;
		/* #endif */
		/* #ifndef H5 */
		top: 0;
		/* #endif */
		left: 0;
		right: 0;
		z-index: 99;
		overflow: hidden;
	}
	.grid {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
		background: #F8F8F8;
		height: 100rpx;
	}
	.np-team {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 20rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
	}

	.np-box {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 100%;
		padding: 20rpx;
	}

	.np-user {
		display: flex;
		flex-direction: row;
		align-items: center;
		flex: 1;
	}

	.np-avatar {
		width: 88rpx;
		height: 88rpx;
		border-radius: 50%;
		margin-right: 10rpx;
	}

	.np-item {
		display: flex;
		flex-direction: column;
		line-height: 44rpx;
	}

	.np-name {
		font-size: 28rpx;
	}

	.np-time {
		font-size: 24rpx;
		color: #666;
	}

	.np-price {
		font-size: 24rpx;
		color: #666;
		flex: 1;
	}

	.np-order {
		font-size: 24rpx;
		color: #666;
	}
	
	.text-red {
		color: #ff5500;
		font-weight: bold;
	}
</style>
